<template>
	<view>
		<scroll ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
		 @emptyclick="emptyClick">
			<stop isBack>
				<view slot="content">活动签到签退</view>
			</stop>
			<!-- 	<view class="flrc bcf pad10">
				<view class="wh20-20 fs36 text-cyan flcc pos-r">
					<view class="cuIcon-scan"></view>
					<view class="fs12 c12 fs8">扫码签到</view>
					<ripple></ripple>
				</view>
			</view> -->
			<view class="bg-gradual-blue pad3" v-if="isbool(curActivity)">
				<view class="pad3 pos-r bcf c11">
					<view class="flrc fwb fs12">
						<status :item="curActivity.type" classes="round3"></status>
						<view class="padl2 flex1">{{curActivity.name}}</view>
					</view>
					<view class="flrc padb2 mart3">
						<view>开始时间：</view>
						<view class="flex1 tar">{{datetime(curActivity.startAt)}}</view>
						<!-- <view class="padl3" v-if="$com.timeLeft(curActivity.startAt) != '已过期'">{{$com.timeLeft(curActivity.startAt)}}</view> -->
						<!-- <view class="padl3" v-if="$com.timeLeft(curActivity.startAt) == '已过期'">已开始</view> -->
					</view>
					<view class="flrc padb2">
						<view>结束时间：</view>
						<view class="flex1 tar">{{datetime(curActivity.endAt)}}</view>
						<!-- <view class="padl3">{{$com.timeLeft(curActivity.endAt)}}</view> -->
					</view>
					<view class="flrc padb2">
						<view>活动地点：</view>
						<view class="flex1 tar">{{curActivity.address}}</view>
					</view>
					<view class="padt2">
						<view class="list-style-2">活动内容</view>
						<view class="mart3" v-html="curActivity.intro"></view>
					</view>
					<view class="flrc bc13 padtb3 mart3">
						<view class="cu-btn bg-green marr10 round lg" @tap="signIn">
							签到
							<ripple></ripple>
						</view>
						<view class="cu-btn bg-orange marl10 round lg" @tap="signOut">
							签退
							<ripple></ripple>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="pad5 bcf">
				<view class="pad20 tac bdda round3 c12">
					<view>未选择任何活动</view>
					<view class="mart3">点击相应活动选择签到签退</view>
				</view>
			</view>
			<view>
				<stab :names="['活动列表','签到记录']" v-model="myCurTab"></stab>
			</view>
			<view class="pad3" v-show="myCurTab === 0">
				<view class="pad3 bdbdo pos-r bcf marb3 round3" v-for="row in activitys" @tap="selectIt(row)">
					<view class="flrc fwb fs12">
						<status :item="row.type" classes="round3"></status>
						<view class="padl2 flex1">{{row.name}}</view>
					</view>
					<view class="flrc padb2 mart3">
						<view>开始时间：</view>
						<view class="flex1 tar">{{datetime(row.startAt)}}</view>
					</view>
					<view class="flrc padb2">
						<view>结束时间：</view>
						<view class="flex1 tar">{{datetime(row.endAt)}}</view>
					</view>
					<view class="flrc padb2">
						<view>活动地点：</view>
						<view class="flex1 tar">{{row.address}}</view>
					</view>
					<view class="padt2">
						<view class="list-style-2">活动内容</view>
						<view class="mart3" v-html="row.intro"></view>
					</view>
					<ripple></ripple>
				</view>
			</view>
			<view class="pad3" v-show="myCurTab === 1">
				<view v-for="item in data" class="bcf pad2 marb3 round3">
					<!-- {{item}} -->
					<view class="lh2 fs14 fwb">{{item.activity.name}}</view>
					<view class="flrc pad2">
						<view class="flex1">
							签到：
						</view>
						<view class="padr3" v-show="isbool(item.signInAt)">{{datetime(item.signInAt)}}</view>
						<view class="padr3" v-show="!isbool(item.signInAt)">未签到</view>
						<view class="fa fa-warning c02" v-show="!isbool(item.flagSignIn)"></view>
						<view class="fa fa-success c01" v-show="isbool(item.flagSignIn)"></view>
					</view>
					<view class="flrc pad2">
						<view class="flex1">
							签退：
						</view>
						<view class="padr3" v-show="isbool(item.signOutAt)">{{datetime(item.signOutAt)}}</view>
						<view class="padr3" v-show="!isbool(item.signOutAt)">未签退</view>
						<view class="fa fa-warning c02" v-show="!isbool(item.flagSignOut)"></view>
						<view class="fa fa-success c01" v-show="isbool(item.flagSignOut)"></view>
					</view>
				</view>
			</view>
			<loading :loading="myIsLoading"></loading>
		</scroll>
	</view>
</template>

<script>
	import List from '../../../assets/js/list.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			let list = new List()
			return {
				list,
				data: [],
				activitys: [],
				curActivity: ''
			}
		},
		methods: {
			reload() {
				this.showLoading()
				this.list.setData({
					_order: {
						id: "DESC"
					},
					_g: ['activity'],
					_range: {
						"0": 'my'
					}
				}).reload()
			},
			selectIt(item) {
				this.curActivity = item
			},
			signIn() {
				this.showLoading()
				let id = this.curActivity.id
				this.$api.get('/api/cimingActivitySigns/' + id + '/signIn', {}, res => {
					this.myCurTab = 1
					this.clearLoading()
					this.$com.showToast(res.i)
					this.reload()
				})
			},
			signOut() {
				this.showLoading()
				let id = this.curActivity.id
				this.$api.get('/api/cimingActivitySigns/' + id + '/signOut', {}, res => {
					this.myCurTab = 1
					this.clearLoading()
					this.$com.showToast(res.i)
					this.reload()
				})
			}
		},
		mounted() {
			this.list.initMescroll(this).setUrl('/api/cimingActivitySigns').setData({
				_order: {
					id: "DESC"
				},
				_g: ['activity'],
				_range: {
					"0": 'my'
				}
			}).setCbFunc(res => {
				this.data = res
				this.clearLoading()
			}).reload()
			this.$api.get('/api/cimingActivitys', {
				_g: ['activity'],
			}, res => {
				this.log(res)
				this.activitys = res.d
			})
		},
		onLoad(option) {

		},
		onShow() {
			this.reload()
		}
	}
</script>

<style>

</style>
